{{ template "header.html" }}

<div class="item">
    WebToolsGo--图片与base64的相互转化
</div>

<div class="item">
    <div>图片 ===> base64</div>
    <label>
        <input type="file" name="file" >
        <button onclick="imageToBase64()">转化</button>
        <textarea name="base64" id="next_base64" cols="30" rows="10"></textarea>
        <img src="" alt="" id="base64-img">
    </label>
</div>

<div class="item">
    <div>base64 ===> 图片</div>
    <label>
        <textarea name="pre_base64" id="pre_base64" cols="30" rows="10"></textarea>
        <button onclick="base64ToImage()">转化</button>
        <img src="" alt="" id="base64-img2">
    </label>
</div>

<script>
    function imageToBase64() {
        var formData = new FormData();
        var files = $("input[name='file']")[0].files[0];
        formData.append("file", files);
        //另外加的参数
        formData.append("act", "PostImg");
        $.ajax({
            url: '/base64/image-to-base64',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            async: false,
            success:function (res) {
                $("#next_base64").val(res.msg)
                $("#base64-img").attr("src", "data:image/png;base64," + res.msg)
            }
            ,error:function (res) {
                alert('错误');
                console.log("Error:" + res)
            }
        });
    }

    function base64ToImage() {
        var pre_base64 = $("#pre_base64").val()
        $("#base64-img2").attr("src", "data:image/png;base64," + pre_base64)
    }
</script>

{{ template "footer.html" }}